<%--
  Created by IntelliJ IDEA.
  User: Mirage
  Date: 2020/7/28
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>

    <%
        String city = request.getParameter("city");
        String province = request.getParameter("province");
        String py = request.getParameter("py");
    %>

</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2><%=city%>市</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html"><%=province%>省</a>
            </li>
            <li>
                <strong><%=city%>市</strong>
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a href="table_data_tables.jsp?city=<%=city%>" class="btn btn-primary">查看患者信息</a>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>累计确诊</h5>
                    <h1 class="no-margins" id="count"></h1>
                    <div class="stat-percent font-bold text-navy"><span id="beforeCount"></span><i class="fa fa-bolt"></i></div>
                    <small>昨日</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>现有确诊</h5>
                    <h1 class="no-margins" id="now"></h1>
                    <div class="stat-percent font-bold text-navy"><span id="before"></span><i class="fa fa-bolt"></i></div>
                    <small>昨日</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>死亡人数</h5>
                    <h1 class="no-margins" id="dieCount"></h1>
                    <div class="stat-percent font-bold text-danger"><span id="beforeDieCount"></span><i class="fa fa-level-down"></i></div>
                    <small>昨日</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>治愈人数</h5>
                    <h1 class="no-margins" id="cureCount"></h1>
                    <div class="stat-percent font-bold text-navy"><span id="beforeCure"></span><i class="fa fa-bolt"></i></div>
                    <small>昨日</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>最新疫情趋势图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="graph_flot.html#">选项1</a>
                            </li>
                            <li><a href="graph_flot.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 100%;height:400px;"></div>
                    <script type="text/javascript">
                        var result = [];

                        /**
                         * 访问后端Controller
                         * 已知地址
                         * 已知参数
                         * msg就是Controller最后return的结果
                         * msg就是一个json数据，读取回来之后，可以按照我们的需求进行正产操作处理。
                         */
                        $.ajax({
                            type: "GET",
                            url: "${pageContext.request.contextPath}/PatientController/getByCity/<%=city%>",
                            async: false,
                            success: function(msg){
                                result = msg;
                            }
                        });


                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));

                        myChart.showLoading();

                        $.get("../json/<%=py%>.json", function (geoJson) {

                            myChart.hideLoading();

                            echarts.registerMap('HK', geoJson);

                            myChart.setOption(option = {

                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{b}<br/>{c} (p / km2)'
                                },
                                toolbox: {
                                    show: true,
                                    orient: 'vertical',
                                    left: 'right',
                                    top: 'center',
                                    feature: {
                                        dataView: {readOnly: false},
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                visualMap: {
                                    min: 800,
                                    max: 50000,
                                    text: ['High', 'Low'],
                                    realtime: false,
                                    calculable: true,
                                    inRange: {
                                        color: ['lightskyblue', 'yellow', 'orangered']
                                    }
                                },
                                series: [
                                    {
                                        name: '香港18区人口密度',
                                        type: 'map',
                                        mapType: 'HK', // 自定义扩展图表类型
                                        label: {
                                            show: true
                                        },
                                        data: result,

                                    }
                                ]
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="../js/content.js?v=1.0.0"></script>
<script type="text/javascript">

    /*后台获取统计数据*/
    $.ajax({
        url: '${pageContext.request.contextPath}/PatientController/getCount/<%=city%>',
        type: 'get',
        ContentType: 'application/json',
        success: function(res){
            console.log(res);
            $('#count').text(res.count);
            $('#beforeCount').text(res.beforeCount);
            $('#now').text(res.now);
            $('#before').text(res.before);
            $('#dieCount').text(res.dieCount);
            $('#beforeDieCount').text(res.beforeDieCount);
            $('#cureCount').text(res.cureCount);
            $('#beforeCure').text(res.beforeCure);

        }
    });

</script>






</body>

</html>

